The Viewer is delivered as a configurable jQuery plugin. The viewer can be initialized with a number of configuration options. See Developer Reference > Configuration Options for more detail on initializing the viewer.
 |
The viewer requires the Prizm Application Services and Prizm Services backend to be running in order to supplement viewing session requests. Also, standard use should provide the viewer access to the Prizm Application Services, either though a reverse proxy configured through your web server or a web-tier application which will handle the request-and-response between the viewer and PAS. |
Required Files
The jQuery plugin is built using several open-source CSS, JavaScript, and HTML template files. These files implement the Viewer UI-chrome, which includes all of the Viewer tabs, buttons, dialogs, and inputs.
Meta
These meta tags are important in enabling Internet Explorer support and maximizing viewport area:
| Example |
Copy Code
|
|---|---|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> |
|
CSS
In order to use the UI-chrome you must link to the following stylesheets:
| Example |
Copy Code
|
|---|---|
<link rel="stylesheet" href="css/normalize.min.css"> <link rel="stylesheet" href="css/viewercontrol.css"> <link rel="stylesheet" href="css/viewer.css"> |
|
JavaScript
The following scripts are required:
| Example |
Copy Code
|
|---|---|
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="js/underscore.min.js"></script> <script src="js/viewercontrol.js"></script> <script src="js/viewer.js"></script> |
|
HTML
You must add a div element with an id that will be used to initialize the Viewer plugin:
| Example |
Copy Code
|
|---|---|
<div id="myDiv"></div>
|
|
Legacy Support
Include this condition for legacy (IE8) support:
| Example |
Copy Code
|
|---|---|
<!--[if lt IE 9]> <link rel="stylesheet" href="css/legacy.css"> <script src="js/html5shiv.js"></script> <![endif]--> |
|
jQuery Plugin
A jQuery plugin is used to embed the full-featured, responsive viewer on the page:
| Example |
Copy Code
|
|---|---|
$("#myDiv").pccViewer(pluginOptions);
|
|
The Viewer UI and behavior can be configured when the Viewer is embedded, using JavaScript parameters:
| Example |
Copy Code
|
|---|---|
var pluginOptions = {
documentID: viewingSessionId,
language: languageItems,
template: htmlTemplates
}
|
|
 |
The documentID, language, and template parameters are required to initialize the Viewer plugin. |
Common Pitfalls
There are a few issues that may arise while initializing the Viewer that may not be immediately obvious. Here are some common console errors and their possible causes:
-
Uncaught TypeError
- Cannot read property 'languageElements' of undefined - This error is thrown when viewer.js cannot find the language object. Verify that the language.json file is being read, and parsed correctly.
-
Uncaught TypeError
- Cannot read property 'viewer' of undefined - This error is thrown when viewer.js cannot find the template object. Make sure that the template object exists and that there is a viewer property.
-
Uncaught ReferenceError
- x is not defined - This error could be thrown if you have referenced a variable in the HTML templates that is not defined as data when loading the template. Check to see that this variable exists in either the language.json file or as a template data property used when loading a template.